<script lang="js" setup>
import {get, post} from '../utils/axios-request'
import {onMounted, reactive, ref} from 'vue';
import {useGlobalConstants} from '../stores/global-constants'
import axios from "axios";

/**
 * 分页
 */
const loading = ref(false);
const exportList = ref([]);
const pages = ref(1);
const currentPage = ref(1);
const total = ref(0);

const paginate = async () => {
  loading.value = true;
  post('/pdf/export/paginate', param, (page) => {
    exportList.value = page.list;
    pages.value = page.pages;
    total.value = page.total;
    loading.value = false;
  }, () => {
    loading.value = false;
  })
};
const onCurrentChange = (page) => {
  currentPage.value = page;
  param.pageNum = page;
  paginate()
}

const onPageSizeChange = (size) => {
  param.pageSize = size;
  param.pageNum = 1;
  paginate()
}
/**
 * 检索条件
 */
const param = reactive({
  pageSize: 10,
  pageNum: 1,
  title: null,
})

/**
 * 获取导出配置的作品集合
 */

const showArtworkTable = ref(false);

const openArtworkTable = (exportId) => {
  showArtworkTable.value = true;
  get('/pdf/export/get/artworks/by/id/' + exportId, (artworks) => {
    artworkList.value = artworks;
  })
};

const artworkList = ref([]);

/**
 * 导出
 */

const exportPDf = exportId => {
  get('/pdf/export/' + exportId, (url) => {
    window.open(url, '_blank');
    paginate();
  });
}
/**
 * 挂在钩子：挂在到DOM之后的事件
 */
onMounted(() => {
  paginate();
})
</script>

<template>
  <el-drawer
      v-model="showArtworkTable"
      title="该导出配置中包含的作品"
      direction="rtl"
      size="50%"
  >
    <el-table :data="artworkList" border>
      <el-table-column property="name" header-align="center" label="作品名称"/>
      <el-table-column property="author" header-align="center" label="艺术家名称"/>
      <el-table-column label="作品图" header-align="center" align="center">
        <template #default="scope">
          <el-image
              style="width: 80px; height: 80px"
              :src="scope.row.thumbnail"
              fit="cover"
              show-progress
              lazy
          ></el-image>
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>
  <div class="search-container">
    <el-row>
      <el-col :span="6">
        <el-input @keyup.enter="paginate" placeholder="导出标题" v-model="param.title"/>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="paginate">查询</el-button>
      </el-col>
    </el-row>
  </div>
  <el-table
      :data="exportList"
      style="width: 100%"
      v-loading="loading"
      element-loading-text="数据加载中..."
      :element-loading-spinner="useGlobalConstants().TABLE_LOADING_SVG"
      element-loading-svg-view-box="-10, -10, 50, 50"
      border
      empty-text="暂无导出"
  >
    <el-table-column fixed label="导出标题" show-overflow-tooltip prop="title" align="center"/>
    <el-table-column fixed label="作品数量" prop="artworkCount" align="center" width="100"/>
    <el-table-column fixed label="PDF文件大小" prop="readableSize" align="center" width="120"/>
    <el-table-column label="导出次数" prop="exportTimes" align="center" width="100"/>
    <el-table-column label="备注/说明" prop="remarks" align="center"/>
    <el-table-column label="创建时间" prop="createTime" align="center"/>
    <el-table-column label="创建人" prop="creator" align="center" width="120"/>
    <!--    <el-table-column label="更新时间" prop="updateTime" align="center"/>-->
    <!--    <el-table-column label="更新人" prop="updater" align="center"/>-->
    <el-table-column fixed="right" label="操作" align="center">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="openArtworkTable(scope.row.id)">查看作品</el-button>
<!--        <el-button link type="primary" size="small" disabled>编辑</el-button>-->
        <el-button link type="primary" size="small" @click="exportPDf(scope.row.id)">导出</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page-container">
    <el-pagination
        size="default"
        background
        :page-sizes="[10, 20, 50]"
        layout="sizes, prev, pager, next, total"
        :total="total"
        :current-page="currentPage"
        @current-change="onCurrentChange"
        @size-change="onPageSizeChange"
        class="mt-4"
    />
  </div>
</template>

<style scoped>

.page-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（可选） */
  margin-top: 5vh;
}

.search-container {
  margin-bottom: 3vh;
}

.search-select {
  width: 90%;
}
</style>